<template>
    <div class="content">
        <ul class="fileList">
            <li @click="pdfClick(item)" v-for="item in pdfList" :key="item.id">
                {{ item.docTitle }}
            </li>
        </ul>
        <div class="searchBox">
            <label for="">全站搜素:</label>
            <el-input v-model="searchName" placeholder="请输入内容">
                <el-button slot="append" icon="el-icon-search" @click.native="search"  @keyup.enter="search"></el-button>
            </el-input>
            <ul class="searchList">
                <li v-for="(item,index) in searchList" :key="index" @click="toPath(item)">
                    <div class="searchLi">
                        <p>{{ item.docTitle }}</p> <span>{{ item.pageNumber }}</span>
                    </div>
                    <div v-html="replaceKeywordColor(item.outComes)" class="docContent"></div>
                </li>
            </ul>
        </div>
    
    </div>
</template>

<script>

import imageViewer from 'element-ui/packages/image/src/image-viewer.vue'

export default {
    components: {
        // PdfPreview
        imageViewer
    },
    data() {
        return {
            dialogShow: false,
            pdfList: [],
            searchName:'',
            searchList:[],
            searchShow:false,
        }
    },
    created() {
        this.init()
    },
    methods: {
        init() {
            this.$http
                .get("/doc/selectDocs")
                .then((res) => {
                    console.log(res);
                    this.pdfList = res.data.data
                });
        },
        pdfClick(item) {
            this.$router.push({
                path:'/docInfo',
                query:{
                    id:item.id,
                    imgNumber:1
                }
            })
        },
        search(){
            console.log(this.searchName);
            this.$http.post("/doc/selectDocPageContentByContent", { pageContent:this.searchName})
                .then((res) => {
                   this.searchList=res.data.data
                });
        },
             //value为搜索框内绑定的值
replaceKeywordColor(val) {
            if (val?.includes(this.searchName) && this.searchName !== '') {
                return val.replace(
                    this.searchName,
                    '<font color="red">' + this.searchName + '</font>'
                )
            } else {
                return val
            }
        },
        toPath(item){
            this.$router.push({
                path:'/docInfo',
                query:{
                    id:item.docId,
                    imgNumber:item.imgNumber
                }
            })
        },
        closeImgViewer() {
            this.imgShow = false
        }
    }
}
</script>

<style>
.content{
    display: flex;
    width: 90%;
}
.searchBox{
    display: flex;
    align-items: center;
    flex: 1;
    height: 50px;
    margin-left: 200px;
    position: relative;
}
.searchList{
    position: absolute;
    top: 20px;
    left: 53px;
}
.searchLi{
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 30px;
    padding: 5px 0;
}
.searchList li p{
    flex: 1;
}
.searchBox label{
    width: 100px;
}
ul {
    list-style: none;
    cursor: pointer;
}

.fileList li {
    height: 40px;
    line-height: 40px;
}




.image-box{
    margin-left: 30%;
    width: 68%;
    height: auto;
}
.docLi {
    width: 100%;
    padding: 10px 0;
}

.imgLi img {
    width: 100%;
    /* height: 1000px; */
}
.doc-content{
    margin-top: 20px;
}
.el-dialog__header{
    position: absolute;
    display: flex;
    width: 95%;
}
.el-dialog__title{
    text-align: center;flex:1;
}
.docContent{
    font-size: 12px;
}
</style>